<template>
  <el-button
    :type="$attrs.type || 'primary'"
    icon="el-icon-search" 
    v-bind="$attrs"
    :loading="loading"
    @click="onClick"
  >
    查询
  </el-button>
</template>

<script>
export default {
  name: 'data-table-query-button',
  inheritAttrs: false,
  props: {
    queryParams: {
      type: [Object, Function]
    },
    /* DataTable的ref的字符串名称 */
    table: {
      type: String,
      default: 'table'
    }
  },
  data() {
    return {
      loading: false
    }
  },
  mounted() {
    const dataTable = this.$vnode.context.$refs[this.table];
    dataTable.$on('loading', (loading) => {
      this.loading = loading;
    });

    let dataTableAppView = ((this.$parent || {}).$parent || {}).$parent;
    if (dataTableAppView) {
      dataTableAppView.$on('enter-keydown', () => {
        this.query();
      });
    }
  },
  methods: {
    onClick() {
      this.$emit('click');
      this.query();
    },
    query() {
      const dataTable = this.$vnode.context.$refs[this.table];
      let queryParams = (typeof this.queryParams == 'function') ? this.queryParams() : this.queryParams;
      this.$emit('query', queryParams);
      dataTable.query(queryParams);
    }
  }
}
</script>